<template>
  <div class="app-container">
    <operation-center @getId="handleNodeClick"/>
    <div class="right-box">
      <el-card shadow="never" class="box-card">
        <div slot="header" class="clearfix">
          <span>机构信息</span>
        </div>
          <el-form>
            <el-row>
              <el-col :span="8">
                <el-form-item label="机构编号" label-width="120px">
                  <el-input v-model="formData.id" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构名称" label-width="120px">
                  <el-input v-model="formData.name" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构类型" label-width="120px">
                  <el-input v-model="formData.type" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="机构地址" label-width="120px">
              <el-row>
                <el-col :span="8">
                  <el-select :disabled="editDisabled" v-model="formData.province.id" placeholder="请选择"
                             style="width: 100%">
                    <el-option
                      v-for="item in provinceOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="8" style="padding: 0 4px">
                  <el-select :disabled="editDisabled" v-model="formData.city.id" placeholder="请选择"
                             style="width: 100%">
                    <el-option
                      v-for="item in cityOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select :disabled="editDisabled" v-model="formData.county.id" placeholder="请选择"
                             style="width: 100%">
                    <el-option
                      v-for="item in countyOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item label="详细地址" label-width="120px">
                  <el-input :disabled="editDisabled" v-model="formData.address"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经度" label-width="120px">
                  <el-input v-model="formData.longitude" disabled>
                    <template #suffix>
                      <div style="margin-right: 14px">E</div>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纬度" label-width="120px">
                  <el-input v-model="formData.latitude" disabled>
                    <template #suffix>
                      <div style="margin-right: 14px">N</div>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="机构负责人" label-width="120px">
                  <el-input :disabled="editDisabled" v-model="formData.managerName"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构电话" label-width="120px">
                  <el-input :disabled="editDisabled" v-model="formData.phone"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        <el-row type="flex" justify="center">
          <el-button type="primary" style="padding: 10px 30px" @click="handleEdit">
            {{ editDisabled===true?'编辑':'保存' }}
          </el-button>
        </el-row>
      </el-card>
      <el-card shadow="never" class="box-card" style="margin-top: 20px;">
        <div slot="header" class="clearfix">
          <span>员工信息</span>
        </div>
        <div class="text item">
          <el-table :data="tableData"  :stripe="true" style="width: 100%;border: 1px solid #eee">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="userId" label="员工编号" width="180"></el-table-column>
            <el-table-column prop="name" label="员工姓名" width="80"></el-table-column>
            <el-table-column prop="mobile" label="手机号"></el-table-column>
            <el-table-column prop="agency.name" label="所属机构"></el-table-column>
            <el-table-column prop="account" label="系统账号"></el-table-column>
            <el-table-column prop="stationName" label="系统角色"></el-table-column>
            <el-table-column prop="status" label="账号状态"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

import OperationCenter from '@/views/branches/components/operationCenter.vue'
import { businessInfo, businessUserPage, getAreasApi } from '@/api/business-hall'

export default {
  name: 'organizational-page',
  components: { OperationCenter },
  data () {
    return {
      tableData: [],
      userpageData: {
        agencyId: 0,
        page: 1,
        pageSize: 5
      },
      editDisabled: true,
      formData: {
        province: { id: '' },
        city: { id: '' },
        county: { id: '' }
      },
      provinceOptions: [],
      cityOptions: [],
      countyOptions: []
    }
  },
  async created () {
    await this.handleNodeClick('1024980800111765185')
    await this.getAreas()
  },
  methods: {

    async handleNodeClick (id) {
      // console.log(id)
      this.userpageData.agencyId = id
      const { data } = await businessUserPage(this.userpageData)
      // console.log(data.items)
      this.tableData = data.items
      const res = await businessInfo(id)
      this.formData = res.data
      // console.log(this.formData.province.id)
      await this.getAreas()
    },
    async getAreas () {
      const res1 = await getAreasApi()
      this.provinceOptions = res1.data
      // console.log(this.formData.province.id)
      const res2 = await getAreasApi(this.formData.province.id)
      // console.log(res2)
      this.cityOptions = res2.data
      // console.log(this.cityOptions)
      const res3 = await getAreasApi(this.formData.city.id)
      this.countyOptions = res3.data
    },
    handleEdit () {
      if (!this.editDisabled) {
        this.$message.error('很抱歉，演示系统，不允许修改')
      } else {
        this.editDisabled = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  padding: 0 10px 20px;
  min-width: 900px;

  .right-box {
    width: 100%;
    .el-card {
      margin-left: 20px;
      ::v-deep .el-card__header {
        background: #fafafa;
        font-weight: 600;
      }
    }
  }
}
</style>
